<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>发送邮件</title>
</head>
<body>
<h2>发送邮件</h2>
<form id="mailForm">
    <label>收件人:</label><br/>
    <input type="text" id="to" name="to"><br/><br/>

    <label>主题:</label><br/>
    <input type="text" id="subject" name="subject"><br/><br/>

    <label>内容:</label><br/>
    <textarea id="text" name="text"></textarea><br/><br/>

    <button type="submit">发送</button>
</form>

<p id="response"></p>

<script>
    document.getElementById('mailForm').addEventListener('submit', function(e) {
        e.preventDefault();

        const data = {
            to: document.getElementById('to').value,
            subject: document.getElementById('subject').value,
            text: document.getElementById('text').value
        };

        fetch('/api/mail/send', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        })
            .then(response => response.text())
            .then(result => {
                document.getElementById('response').innerText = result;
            })
            .catch(error => {
                document.getElementById('response').innerText = '发送失败: ' + error;
            });
    });
</script>
</body>
</html>
